<template>
	<view>
		<!-- <view class="order_tab">
			<view class="tab_item" :class="index == tabIndex ? 'tab_select':''" v-for="(item,index) in tabList"
				:key="index" @tap="chageTab(index)">
				<view class="">
					{{item}}
				</view>
			</view>
		</view> -->
		<view class="flex-y-center list" v-for="(item,index) in data.data_list" :key="index">
			<image :src="item.avatar" class="img grow-0"></image>
			<view class="flex-grow-1">
				<view class="num">{{index+1}}</view>
				<view class="name">{{item.nickname}}</view>
			</view>
			<view class="money">{{item.money||'0.00'}}</view>
		</view>
		
		<view v-if="data.no_list" class="bottom-text">暂无数据</view>
		<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
		<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
					 加载中...
		</view>
		
	</view>
</template>

<script>
	import {revenueRanking} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: ['今日排行', '本周排行', '本月排行'],
				list: [],
				data:{
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock:0,
			}
		},
		onLoad() {
			this.loadDataList();
		},
		
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function (t) {
			var o = this;
			o.loadDataList(function () {
			  o.data.loading_more = !0;
			});
		},
		methods: {
			chageTab(index) {
				this.tabIndex = index;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				};
				this.loadDataList();
			},
			//获取数据列表
			  loadDataList: function (f) {
				var o = this;
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
				  var page = (o.data.current_page || 0) + 1;
				  var data = {
					page: page,
					type:o.tabIndex,
				  }
				  o.lock = 1;
				  console.log(o.lock)
				  revenueRanking(data).then((t) => {
				  	if(t.code == 1){
						  if (1 == t.data.current_page && !t.data.data.length) {
							  o.data.no_list= !0;
							  o.data.loading_more= !1
						  }
						 if (t.data.data && t.data.data.length) {
							 o.data.data_list = o.data.data_list || [];
							 o.data.data_list = o.data.data_list.concat(t.data.data), 
							 o.data.current_page= page;
						 }	
					     if (!t.data.has_more) {
							 o.data.no_more= !0;
						 }						  
						 
				  	}else{
				  		uni.showToast({
				  			title:'网络繁忙',
				  			icon:'error'
				  		})
				  	}
					o.lock = 0;
				  });
				}
			  },
		}
	}
</script>

<style>
	.order_tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 70rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		padding-bottom: 18rpx;
	}

	.order_tab .tab_item {
		text-align: center;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #5f5f5f;
		position: relative;
		flex: 1;
		word-wrap: break-word;
		overflow: hidden;
		overflow-x: scroll;
	}

	.order_tab .tab_select {
		// 选中字体颜色
		color: #333;
		font-weight: 700;
	}

	.order_tab .tab_select:after {
		content: '';
		width: 100rpx;
		height: 4rpx;
		background: #ff8546;
		border-radius: 6rpx;
		position: absolute;
		bottom: 0;
	}

	.order_tab .num {
		padding: 20rpx;
	}

	.list {
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		background: #fff;
	}

	.list .img {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.list .num {
		color: #ec0c0d;
		font-size: 24rpx;
		font-weight: 700;
	}

	.list .name {
		font-size: 30rpx;
		font-weight: 700;
	}

	.list .money {
		font-size: 28rpx;
		font-weight: 700;
			color: #ec0c0d;
	}
</style>
